<template>
  <div class="device-list">
    <el-card>
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        :header-cell-style="{ background: '#eff3f8', color: '#333' }"
        stripe
        size="small"
        :default-sort="{ prop: 'date', order: 'descending' }"
        max-height="700"
        highlight-selection-row
        border
      >
        <el-table-column
          v-for="item in tableHeader"
          v-if="item.visible"
          :key="item.prop"
          :label="item.title"
          :min-width="item.width"
          :prop="item.prop"
          :show-overflow-tooltip="true"
          :align="item.align"
          sortable
        >
          <template #default="scope">
            <span
              v-if="item.prop === 'projectName'"
              class="link-type"
              @click="handleClick(scope.row, 'projectName')"
              ><svg-icon
                icon-class="table-edit"
                style="margin-right: 5px; width: 13px; height: 15px; fill: #165eff"
              />{{ scope.row.projectName }}</span
            >

            <span
              v-else-if="item.prop === 'projectAdmin'"
              class="link-type"
              @click="handleClick(scope.row, 'projectAdmin')"
            >
              <svg-icon
                icon-class="table-set"
                style="margin-right: 5px; width: 15px; height: 15px; fill: #165eff"
              />{{ scope.row.projectAdmin }}</span
            >
            <!-- 联网状态 -->
            <span v-else-if="item.prop === 'personInCharge'">
              <span
                :class="scope.row[item.prop] == '在线' ? 'table-online' : 'table-offline'"
              >
                {{ scope.row[item.prop] }}</span
              >
            </span>
            <!-- 开关机 -->
            <span v-else-if="item.prop === 'switchStatus'">
              <span :class="scope.row[item.prop] == '开机' ? 'table-online' : ''">
                {{ scope.row[item.prop] }}</span
              >
            </span>
            <!-- workStatus  -->
            <span v-else-if="item.prop === 'workStatus'">
              <span :class="scope.row[item.prop] == '未启动' ? '' : 'table-online'">
                {{ scope.row[item.prop] }}</span
              >
            </span>
            <span v-else>
              {{ scope.row[item.prop] }}
            </span>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 15px">
        <el-pagination
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>
<script>
import CardTable from "@/components/CardTable";
export default {
  components: {
    CardTable,
  },
  data() {
    return {
      tableHeader: [
        {
          title: "项目ID",
          prop: "address",
          width: "130",
          visible: true,
          align: "left",
          fixed: true,
        },
        {
          title: "设备名称",
          prop: "projectAdmin",
          width: "100",
          visible: true,
          align: "left",
          fixed: true,
        },
        {
          title: "所属项目",
          prop: "company",
          width: "150",
          visible: true,
          align: "left",
        },
        {
          title: "设备分组",
          prop: "totleNum",
          width: "120",
          visible: true,
          align: "center",
        },
        {
          title: "设备安装位置",
          prop: "onlineNum",
          width: "120",
          visible: true,
          align: "center",
        },
        {
          title: "子设备类型",
          prop: "offlineNum",
          width: "120",
          visible: true,
          align: "center",
        },
        {
          title: "联网状态",
          prop: "personInCharge",
          width: "100",
          visible: true,
          align: "center",
        },
        {
          title: "备注信息",
          prop: "remark", // 修改为唯一值
          visible: true,
          align: "center",
          width: "100",
        },
      ],
      tableData: [],
      multipleSelection: [],
      btnDisabled: true,
      currentPage: 1,
    };
  },
  watch: {
    deviceList: {
      handler(val) {
        console.log(val, "val");
        this.tableData = val;
      },
      deep: true,
    },
  },
  props: {
    deviceList: {
      type: Array,
      default: [],
    },
  },
  mounted() {
    this.tableData = this.deviceList;
    console.log(this.deviceList, "this.deviceList");
  },
  methods: {
    initTable() {
      this.tableData = [
        {
          projectName: "KTWG15980001",
          projectAdmin: "智能空调1",
          company: "香缇澜山二期",
          totleNum: "-",
          onlineNum: "-",
          offlineNum: "空调交流lora",
          personInCharge: "在线",
          address: "21.9℃",
          outdoorTemp: "14.0℃",
        },
        {
          projectName: "KTWG15980001",
          projectAdmin: "智能空调1",
          company: "香缇澜山二期",
          totleNum: "-",
          onlineNum: "-",
          offlineNum: "空调交流lora",
          personInCharge: "在线",
          address: "21.9℃",
          outdoorTemp: "14.0℃",
          switchStatus: "开机",
          targetTemp: "22℃",
          workStatus: "未启动",
          networkLock: "解锁",
          tempMode: "-",
          schedule: "未启动",
          signalStrength: "90",
          remark: "-",
        },
        {
          projectName: "KTWG15980001",
          projectAdmin: "智能空调2",
          company: "香缇澜山二期",
          totleNum: "-",
          onlineNum: "-",
          offlineNum: "空调交流lora",
          personInCharge: "离线",
          address: "21.9℃",
          outdoorTemp: "14.0℃",
          switchStatus: "开机",
          targetTemp: "22℃",
          workStatus: "已启动",
          networkLock: "开放开关机",
          tempMode: "-",
          schedule: "已启用",
          signalStrength: "90",
          remark: "-",
        },
        {
          projectName: "KTWG15980001",
          projectAdmin: "智能空调5",
          company: "香缇澜山二期",
          totleNum: "-",
          onlineNum: "-",
          offlineNum: "空调交流lora",
          personInCharge: "在线",
          address: "21.9℃",
          outdoorTemp: "14.0℃",
          switchStatus: "开机",
          targetTemp: "22℃",
          workStatus: "运行中",
          networkLock: "已锁定",
          tempMode: "-",
          schedule: "已启用",
          signalStrength: "90",
          remark: "-",
        },
        {
          projectName: "KTWG15980001",
          projectAdmin: "智能空调3",
          company: "香缇澜山二期",
          totleNum: "-",
          onlineNum: "-",
          offlineNum: "空调交流lora",
          personInCharge: "在线",
          address: "21.9℃",
          outdoorTemp: "14.0℃",
          switchStatus: "开机",
          targetTemp: "22℃",
          workStatus: "运行中",
          networkLock: "已锁定",
          tempMode: "-",
          schedule: "已启用",
          signalStrength: "90",
          remark: "-",
        },
      ];
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },

    handleClick(row, field) {
      switch (field) {
      }
    },
  },
};
</script>
